<%--
  Created by IntelliJ IDEA.
  User: Admin
  Date: 2021/6/25
  Time: 13:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>EmpInfo</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">
    <link rel="stylesheet" href="./static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="./static/layui/layui.js"></script>

</head>
<style>
    #edit input {
        margin: 5px;
    }
</style>
<body>
<%--修改遮罩层--%>
<div id="edit" class="form-inline" style="padding: 20px;">
    <label for="id">ID</label>
    <input class="form-control" type="text" id="id" name="id" disabled><br/>
    <label for="name">姓名</label>
    <input class="form-control" type="text" id="name" name="name"><br/>
    <div class="layui-form ">
        <input class="sex" type="radio" name="sex" value="男" title="男" checked="">
        <input class="sex" type="radio" name="sex" value="女" title="女">
    </div>
    <label for="email">邮箱</label>
    <input class="form-control" type="text" id="email" name="email"><br/>
    <label for="deptId">部门</label>
    <div  class="layui-form layui-inline">
        <select name="deptId" id="deptId">
            <c:forEach items="${dept}" var="dept">
                <option value="${dept.deptId}">
                        ${dept.deptName}
                </option>
            </c:forEach>
        </select>
    </div>
    <br>

    <button class="btn btn-primary">修改</button>
</div>
<%--修改遮罩层--%>

<form class="layui-form" method="post">
    <table class="layui-table">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>邮箱</th>
            <th>部门</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${list}" varStatus="s" var="emp">
            <tr onclick="getEmp(${emp.empId})">
                <td>${emp.empId}</td>
                <td>${emp.empName}</td>
                <td>
                    <c:if test="${emp.gender=='M'}">
                        女
                    </c:if>
                    <c:if test="${emp.gender!='M'}">
                        男
                    </c:if>
                </td>
                <td>${emp.email}</td>
                <td>${emp.tabDept.deptName}</td>
                <td>
                    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-sm del"
                       href="${pageContext.request.contextPath}/emp/${emp.empId}">删除</a>
                    <a class="layui-btn layui-btn-primary layui-border-green layui-btn-sm edit">修改</a>
                </td>
            </tr>
        </c:forEach>
        <a href="#" class="layui-btn ">添加</a>
    </table>
</form>
<form action="" method="post" id="formDel">
    <input type="hidden" name="_method" value="delete"/>
</form>
</body>
<script>

    layui.use(function () {
        let layer = layui.layer,
            $ = layui.$,
            form = layui.form;

        //删除
        $(".del").click(function () {
            $("#formDel").attr("action", $(this).attr("href")).submit();
            return false;
        })

        //修改
        $(".edit").click(function () {

        })

    })

    function getEmp(empId) {
        console.log("准备获取" + empId + "的值");
        layui.use(function () {
            let layer = layui.layer,
                $ = layui.$,
                form = layui.form;
            $.get("${pageContext.request.contextPath}/emp/getEmp/" + empId, function (data, res) {
                console.log(data, res)
                if (res === "success") {
                    // let d = JSON.parse(data);
                    $("#id").val(data["empId"]);
                    $("#name").val(data["empName"]);
                    $(".sex").val(data["gender"]);
                    $("#email").val(data.email);
                    $("#deptName").val(data);
                    //serialize转换成json格式
                    $.post("${pageContext.request.contextPath}/update/"["empNo"], $("#lxk").serialize(), $("#update").click(function () {

                    }))
                }
            })
        })
    }
</script>
</html>
